<template>
  <div class="box">
    <div class="a1">
      <div class="a12">
        <div class="xiaohui1-logo">
          <img src="@/assets/zhiyuan.png" alt="校徽" class="xiaohui1-logo" />
        </div>
        <div class="header">青年志愿服务网 CYVA</div>
      </div>
    </div>
    <div class="a2">
      <div class="a3">
        <img src="@/assets/zhiyuan.png" alt="校徽" class="xiaohui2-logo" />
        <div class="a31">欢迎注册</div>
        <div class="a311">
          <input v-model="name" type="text" class="login-input" placeholder="请输入姓名" />
        </div>
        <div class="a4">
          <input v-model="registerEmail" type="text" class="login-input" placeholder="请输入邮箱" />
        </div>
        <div class="a5">
          <div class="a51">
            <input v-model="registerCode" type="text" class="login-input" placeholder="请输入验证码" />
          </div>
          <div class="a52">
          <button @click="sendCode" class="a52">
              {{ maxTime > 0 ? `${maxTime}s后重新获取` : '获取验证码' }}
            </button>
          </div>
        </div>
        <div class="a6">
          <input v-model="registerPwd" type="password" class="login-input" placeholder="请输入密码" />
        </div>
        <div class="a7">
          <input v-model="registerPwdConfirm" type="password" class="login-input" placeholder="请再次输入密码" />
        </div>
        <div class="btn-group">
          <button @click="register" class="btn">注册</button>
        </div>
        <div class="btn1">
          <button @click="LoginView4" class="btn1">已有账号？登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();

const name = ref('');
const registerEmail = ref('');
const registerCode = ref('');
const registerPwd = ref('');
const registerPwdConfirm = ref('');
const maxTime = ref(0);


const sendCode = async () => {
  if (!registerEmail.value) {
    alert('请输入邮箱');
    return;
  }
  
  try {
    const response = await fetch('http://localhost:9000/send_email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email: registerEmail.value }),
    });
    
    const result = await response.json();
    if (response.ok) {
      alert('验证码已发送');
      maxTime.value = 60;
      const timer = setInterval(() => {
        maxTime.value--;
        if (maxTime.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } else {
      alert(result.errorMsg || '发送验证码失败');
    }
  } catch (error) {
    console.error('发送验证码请求失败：', error);
    alert('网络错误，请稍后再试');
  }
};
const register = async () => {
  if (!name.value) {
    alert('请输入姓名');
    return;
  }
  if (!registerEmail.value) {
    alert('请输入邮箱');
    return;
  }
  if (!registerCode.value) {
    alert('请输入验证码');
    return;
  }
  if (!registerPwd.value || !registerPwdConfirm.value) {
    alert('请输入密码');
    return;
  }
  if (registerPwd.value !== registerPwdConfirm.value) {
    alert('两次密码输入不一致');
    return;
  }
  
  try {
    const response = await fetch('http://localhost:9000/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: name.value,
        email: registerEmail.value,
        code: registerCode.value,
        pwd: registerPwd.value,
        pwdConfirm: registerPwdConfirm.value
      }),
    });
    
    const result = await response.json();
    if (response.ok) {
      alert('注册成功！');
      router.push('/LoginView'); 
    } else {
      alert(result.errorMsg || '注册失败');
    }
  } catch (error) {
    console.error('注册请求失败：', error);
    alert('网络错误，请稍后再试');
  }
};

const LoginView4 = () => {
  router.push("/LoginView");
};

</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/feige.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.a1 {
  width: 100%;
  height: 50px;
  color: black;
  font-size: 20px;
  display: flex;
}
.a12 {
  display: flex;
  margin-top: 10px;
}
.header{
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-left: 20px;
}
.xiaohui1-logo {
  width: 80px;
  height: 80px;
  margin-top: -2px;
  border-radius: 100px;
}
.btn {
  width: 370px;
  height: 44px;
  color: rgba(6, 149, 245, 0.38);
  border: none;
  border-radius: 15px;
  background: white;
  margin-left: -1px;
  margin-top: 0px;
}
.btn:hover {
  background: #e0f7fa;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 138, 197, 0.2);
}
.btn1 {
  color: rgba(6, 149, 245, 0.38);
  border: none;
  border-radius: 10px;
}
.btn1:hover {
  background: #e0f7fa;
}

.btn1:active {
  box-shadow: 0 2px 8px rgba(0, 138, 197, 0.2);
}
.xiaohui2-logo {
  width: 150px;
  height: auto;
  display: flex;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
}

.a2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.a3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 430px;
  height: 635px;
  margin-top: 28px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(245, 252, 255, 0.94), rgba(0, 138, 197, 0.6));
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 138, 197, 0.3), 0 5px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.a31 {
  font-size: 20px;
}
.a311 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a311 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
.a4 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a4 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
.a5 {
  display: flex;
  align-items: center;
  width: 280px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: -100px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a5 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 275px;
  border-radius: 10px;
  border: none;
}
.a52 {
  width: 85px;
  height: 40px;
  color: rgba(6, 149, 245, 0.38);
  border: none;
  border-radius: 10px;
  background: white;
  margin-left: 7px;
  justify-content: center;
  align-items: center;
}
.a6 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1px 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a6 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
.a7 {
  display: flex;
  align-items: center;
  width: 380px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  border-radius: 10px;
  padding: 1 0px;
  border: 1px solid #ccc;
  border-color: rgba(9, 104, 206, 0.99);
  box-sizing: border-box;
}
.a7 input {
  /* flex: 1; */
  height: 36px;
  outline: none;
  background: #d4f4f9;
  color: rgb(8, 75, 146);
  width: 376px;
  border-radius: 10px;
  border: none;
}
</style>
